<template>
  <div id="navArea">
    <div class="headbar yh-layout-box">
      <div class="nav-publicity">
        <span class="nav-tips">
          工业品采购，上一呼百应！
        </span>
        <span class="nav-line">|</span>
        <span class="nav-hotline">
          服务热线：<span class="nav-phone">020-28955054</span>
        </span>
      </div>
      <div class="nav-menus">
        <ul>
          <li><a @click="routeToPath('/mallplus/')">平台首页</a><span class="nav-line">|</span></li>
          <li v-if="userInfo">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <a>{{ userInfo.nickName?userInfo.nickName:userInfo.username }}<i class="el-icon-arrow-down el-icon--right"></i></a>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item> <a @click="routeToOpen('/mallplus/member/main')">个人中心</a></el-dropdown-item>
                <el-dropdown-item divided command="loginOut">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span class="nav-line">|</span>

          </li>

          <li v-if="!userInfo"> <a @click="routeToOpen('/mallplus/login')">登录</a> <span class="nav-line">|</span></li>
          <li v-if="!userInfo"><a @click="routeToOpen('/mallplus/login/register')">注册</a><span class="nav-line">|</span></li>

          <li class="down-app">APP<span class="nav-line">|</span>
            <div class="qrcode-image">
              <img src="@/assets/images/layouts/footbars/apps.png" alt="">
            </div>
          </li>
          <li><a @click="routeToOpen('/mallplus/help')">帮助中心</a></li>
        </ul>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    props: {

    },
    data() {
      return {
        userInfo: this.getUserInfo(),
      }
    },
    created() {

    },
    methods: {
      handleCommand(e) {
        if(e == 'loginOut'){
          this.loginOut()
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  #navArea{
    background-color: #F7F7F7;
    padding: 13px 0;
    min-width: 1200px;
    font-size: 12px;
    .headbar{
      height: 16px;
    }
    a{
      font-size: 12px;
    }
    .down-app{
      position: relative;
      &:hover .qrcode-image{
        display: block;
      }
      .qrcode-image{
        position: absolute;
        top: 18px;
        left: 50%;
        margin-left: -60px;
        display: none;
        z-index: 99999999;
      }
    }
    .nav-publicity{
      float: left;
      color: #888888;
      .nav-phone{
        color: #255B8B;
        font-weight: 600;
      }
    }
    .nav-menus{
      float: right;
      li{
        display: inline-block;
        float: left;
        color: #888;
        cursor: pointer;
        a{
          color: #888;
          transition: all 0.3s;
          &:hover{
            color: #255B8B;
          }
        }
      }
    }
    .nav-line{
      font-size: 8px;
      padding-right: 14px;
      padding-left: 14px;
      color: #ccc;
    }
  }
</style>
<style lang='scss'>
  #navArea{
    .nav-menus{
      li{
        .el-dropdown{
          font-size: 12px;
        }
      }
    }
  }
</style>
